<template>
  <div>
    <f-table ref="tableRef" @register="register">
      <template #header-left>
        <el-button type="primary" @click="handleAdd">添加公众号</el-button>
      </template>

      <template #status="{ row }">
        <!-- 1=开启，2=停用 -->
        <el-tag :type="row.status==1 ? 'success' : 'info'">{{ row.status==1 ? '开启' : '停用' }}</el-tag>
      </template>
      <template #action="{ row }">
        <el-space wrap>
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
        </el-space>
      </template>
    </f-table>
    <el-dialog :title="dialogName" v-model="dialogFormVisible" width="500px" :center="true">
        <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item label="公众号名称" label-width="100" prop="name">
                <el-input v-model.trim="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="appid" label-width="100" prop="appid">
                <el-input v-model.trim="form.appid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="secret" label-width="100" prop="secret">
                <el-input v-model.trim="form.secret" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="100" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio value="1">开启</el-radio>
                    <el-radio value="2">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer text-right" >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/system.account'
import { getWechatOfficialListApi, getWechatOfficialAddApi, getWechatOfficialEditApi, getWechatOfficialDelApi } from '../../api/system'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IEmployeeItem>[],
    beforeFetch: (opt) => opt,
    api: async (opt) => (await getWechatOfficialListApi(opt)).data
})

const dialogName = ref('添加公众号')
const dialogFormVisible = ref(false)
const formRef = ref()
const form = ref({
    name: '',
    appid: '',
    secret: '',
    status: '2'
})
const rules = ref({
    name: [{ required: true, message: '请输入公众号名称', trigger: 'blur' }],
    appid: [{ required: true, message: '请输入公众号appid', trigger: 'blur' }],
    secret: [{ required: true, message: '请输入公众号secret', trigger: 'blur' }],
})

/**
 * @description 添加公众号
 */
async function handleAdd () {
    dialogName.value = '添加公众号'
    formRef.value?.resetFields()
    nextTick(() => {
        dialogFormVisible.value = true
    })
}

/**
 * @description 确认
 */
async function confirm () {
    formRef.value.validate(async (valid) => {
        if (valid) {
            if (dialogName.value === '添加公众号') {
                await getWechatOfficialAddApi(form.value)
            } else {
                await getWechatOfficialEditApi(form.value)
            }
            ElMessage.success(dialogName.value === '添加公众号' ? '添加成功' : '编辑成功')
            dialogFormVisible.value = false
            methods.reload()
        }
    })
}

/**
 * @description 编辑公众号
 */
async function handleEdit (row: any) {
    dialogName.value = '编辑公众号'
    form.value = JSON.parse(JSON.stringify(row))
    nextTick(() => {
        dialogFormVisible.value = true
    })
}

/**
 * @description 删除公众号
 */
async function handleDelete (row: any) {
    ElMessageBox.confirm('确定删除该公众号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await getWechatOfficialDelApi({ id: row.id })
        ElMessage.success('删除成功')
        methods.reload()
    })
}


</script>

<style lang="scss" scoped>
</style>
